<template>
  <div class="container">
    <a-spin :spinning="spinning">
      <div v-for="item in listData" :key="item.id">
        {{ item.name }}-{{ item.hobby }}
      </div>
    </a-spin>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userId: 8,
      spinning: false,
      listData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    pushNewData() {
      this.listData.push(false);

      const isHaveId = this.listData.findIndex((item) => {
        +item.id === +this.userId;
      });

      if (isHaveId === -1) {
        this.listData.push(false);
      }
    },
    getList() {
      this.spinning = true;
      this.listData = [
        { id: 1, name: "保罗", hobby: "射击" },
        { id: 2, name: "皮尔斯", hobby: "足球" },
        { id: 3, name: "詹姆斯", hobby: "篮球" },
        { id: 4, name: "桂花糖", hobby: "摔跤" },
        { id: 5, name: "阿桑", hobby: "科研" },
      ];
      this.pushNewData();
      this.spinning = false;
    },
  },
  components: {},
};
</script>
<style lang="less" scoped>
.container {
  padding-top: 50px;
  display: flex;
  justify-content: center;
  height: 600px;
  border: 1px solid red;
}
</style>
